<script setup lang="ts">
import { OrderType } from "@/enum";
import type { ConsultOrderItem } from "@/types/chitchat";
import useConsultRecordStore from "@/pinia/modules/consultRecordStore.ts";
import { computed, ref } from "vue";
import { showConfirmDialog, showFailToast } from "vant";
import useLookPre from "@/hooks/useLookPre.ts";

const props = defineProps<{
    item: ConsultOrderItem
}>();

const emits = defineEmits<{
    (eventName: "delete", id: string): void,
    (eventName: "openSheet", flag: boolean): void
}>();

const consultRecordStore = useConsultRecordStore();

const actions = computed(() => [
    { text: "查看处方", disabled: !props.item.prescriptionId },
    { text: "删除订单" },
]);

const showPopover = ref<boolean>(false);

/*删除问诊订单*/
const deleteConsultOrder = async (id: string) => {
    const dialog: "confirm" | "cancel" = await showConfirmDialog({ title: "温馨提示", message: "确认删除问诊订单吗?" }).catch(error => error);
    if (dialog === "cancel") return;
    try {
        await consultRecordStore.deleteConsultOrder(id);
        emits("delete", id);
    } catch (error: any) {
        showFailToast(error.message);
    }
};
/*取消问诊订单*/
const cancelConsultOrder = async () => {
    const dialog: "confirm" | "cancel" = await showConfirmDialog({ title: "温馨提示", message: "确认取消问诊订单吗?" }).catch(error => error);
    if (dialog === "cancel") return;
    try {
        await consultRecordStore.cancelConsultOrder(props.item.id);
        props.item.status = OrderType.ConsultCancel;
        props.item.statusValue = "已取消";
    } catch (error: any) {
        showFailToast(error.message);
    }
};
/*查看处方*/
const lookPre = async () => {
    await useLookPre(props.item.prescriptionId as string);
};
/*点击选项时触发的回调函数*/
const onSelect = async (option: any) => {
    if (option.text === "删除订单") {
        await deleteConsultOrder(props.item.id);
    } else {
        await useLookPre(props.item.prescriptionId as string);
    }
};

</script>

<template>
    <div class="foot" v-if="item.status === OrderType.ConsultPay">
        <van-button class="gray" plain size="small" round @click="cancelConsultOrder">取消问诊</van-button>
        <van-button type="primary" size="small" round @click="emits('openSheet',true)">去支付</van-button>
    </div>

    <div class="foot" v-if="item.status === OrderType.ConsultWait">
        <van-button class="gray" plain size="small" round @click="cancelConsultOrder">取消问诊</van-button>
        <van-button type="primary" size="small" round :to="`/consult/chitchat?orderId=${item.id}`">继续沟通</van-button>
    </div>

    <div class="foot" v-if="item.status === OrderType.ConsultChat">
        <van-button v-if="item.prescriptionId" class="gray" plain size="small" round @click="lookPre">查看处方</van-button>
        <van-button type="primary" size="small" round :to="`/consult/chitchat?orderId=${item.id}`">继续沟通</van-button>
    </div>

    <div class="foot" v-if="item.status === OrderType.ConsultComplete">
        <div class="more">
            <van-popover placement="top-start" :actions="actions" v-model:show="showPopover" @select="onSelect">
                <template #reference> 更多</template>
            </van-popover>
        </div>
        <van-button class="gray" plain size="small" round :to="`/consult/chitchat?orderId=${item.id}`">问诊记录</van-button>
        <van-button v-if="!item.evaluateId" type="primary" size="small" round :to="`/consult/chitchat?orderId=${item.id}`">查看评价</van-button>
        <van-button v-else class="gray" size="small" round :to="`/consult/chitchat?orderId=${item.id}`"> 查看评价</van-button>
    </div>

    <div class="foot" v-if="item.status === OrderType.ConsultCancel">
        <van-button class="gray" size="small" round @click="deleteConsultOrder(item.id)">删除订单</van-button>
        <van-button type="primary" size="small" round to="/">咨询其他</van-button>
    </div>
</template>

<style scoped lang="scss">
.foot {
    padding: 0 15px 10px 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .van-button {
        margin-left: 10px;
        padding: 0 16px;

        &.gray {
            color: var(--cp-text3);
            background-color: var(--cp-bg);
        }
    }

    .more {
        color: var(--cp-tag);
        flex: 1;
        font-size: 13px;
    }
}
</style>
